<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态定义table</title>
	<style>
		div{
			border: 1px solid red;
			width: 700px;
			height: 300px;
			margin: 100px auto;
		}
		table{
			margin: 0 atuo;
			width: 600px;
			height: 300px;
		}
		tr{
			display: flex;
		}
		th{
			background: green;
			flex: 1;
		}
	</style>

</head>
<body>
	<div>
		<table id="bookcontainer">
			<tr>
				<th>书名</th>
				<th>作者</th>
				<th>简介</th>
			</tr>
		</table>
	</div>

	<script>
		window.onload = function(){
			// 第一步创建对象
			var xhr=null;
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}else{
				xhr=new ActiveXObject('Microsoft.XMLHTTP');
			}
			// 第2部open准备发送
			open('post','url',true);
			// 第3步发送请求
			send(null);
			// 第4步判断
			xhr.onreadystatechange=function(){
				if(xhr.status==200&&xhr.readyState==4){
					// 获取到后台返回的数据
					var result = xhr.responseText;
					// 将后台获取到的数据，字符串转成json对象
					result=JSON.parse(result);
					// 获取到后台数据的books数组
					var books=result.getElementById('booklist')[0].getElementsByTagName('book');
					// 将当前div盒子的内容赋值给newHTML
					var newHTML = document.getElementById('bookcontainer').innerHTML;
					// 遍历books数组
					for(var i=0;i<books.length;i++){
						// 将books数组的当前元素赋值给itemBook，表示当前这本书的数据
						var itemBook = books[i];
						// 获取到当前这本书的name值
						var name = itemBook.name;
						var author = itemBook.author;
						var text = itemBook.text;
						// 动态获取到table的新内容
						var tempHtml = '<tr><td>'+name+'</td><td>'+author+'</td><td>'+text+'</td></tr>';
						newHTML+=tempHtml;
					}
					document.getElementById('bookcontainer').innerHTML=newHTML;
				}
			}
			
		}
	</script>
</body>
</html>